iT邦幫忙

DAY 28
1

網頁程式自學亂亂來系列 第 28

自適應下拉式選單 -- CSS

  • 分享至 

  • xImage
  •  

從老外的教學學到如何讓網頁上的選單,

會根據不同的解析度改變呈現方式

http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

這篇文章目前我只學到上半部CSS的部分,

下半部似乎是介紹javascript的方法?

1.先在之間放入選單的html語法(就像一般的一樣)

<nav id="nav" role="navigation">

<a href="#nav" title="Show navigation">Show navigation</a>

<a href="#" title="Hide navigation">Hide navigation</a>

<ul>

<li><a href="/">Home</a></li>

<li>

<a href="/" aria-haspopup="true">Blog</a>

<ul>

<li><a href="/">Design</a></li>

<li><a href="/">HTML</a></li>

<li><a href="/">CSS</a></li>

<li><a href="/">JavaScript</a></li>

</ul>

</li>

<li>

<a href="/" aria-haspopup="true">Work</a>

<ul>

<li><a href="/">Web Design</a></li>

<li><a href="/">Typography</a></li>

<li><a href="/">Front-End</a></li>

</ul>

</li>

<li><a href="/">About</a></li>

</ul>

</nav>

2.在css樣式的地方,放入一般情況下nav的設定(也跟平常一樣)

#nav

{

/* container */

}

#nav > a

{

display: none;

}

#nav li

{

position: relative;

}

/* first level */

#nav > ul

{

height: 3.75em;

}

#nav > ul > li

{

width: 25%;

height: 100%;

float: left;

}

/* second level */

#nav li ul

{

display: none;

position: absolute;

top: 100%;

}

#nav li:hover ul

{

display: block;

}

3.接下來,就是設定螢幕大小不相同的時候的下拉式選單樣式(作者這邊是設定螢幕小於等於640px)

@media only screen and ( max-width: 40em ) /* 640 */

{

#nav

{

position: relative;

}

#nav > a

{

}

#nav:not( :target ) > a:first-of-type,

#nav:target > a:last-of-type

{

display: block;

}

/* first level */

#nav > ul

{

height: auto;

display: none;

position: absolute;

left: 0;

right: 0;

}

#nav:target > ul

{

display: block;

}

#nav > ul > li

{

width: 100%;

float: none;

}

/* second level */

#nav li ul

{

position: static;

}

}

接著,網頁下拉選單真的很神奇的會隨著解析度不同而改變嘍!


上一篇
ssh不需要指令也能傳輸scp的軟體 WinSCP Fugu
下一篇
主機php5.3到5.4升級之後--addslashes的影響 (更正篇)Magic Quotes
系列文
網頁程式自學亂亂來30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言